{template 'include/header'}
<link rel="stylesheet" type="text/css" href="<?php echo MODULE_URL;?>template/mobile/css/yqj_create.min.css">
<style type="text/css">
    .page-call .cover{overflow: hidden;}
    .page-landscape{width:100%; height:100%; background:#333;position: fixed; left:0; right:0; top: 0; bottom:0;z-index:9999999; display:none; text-align: center;}.page-landscape-box{position: relative; margin-left: auto; margin-right: auto; top: 50%; transform:translateY(-50%); -webkit-transform:translateY(-50%);}.page-landscape span{font-size:16px;display:block;color:#FFFFFF; text-align:center;width: 100%;padding-top: 40px; line-height:2;}.page-landscape img{-webkit-animation: page-landscapeAni 1.2s ease infinite alternate;animation: page-landscapeAni 1.2s ease infinite alternate;}@-webkit-keyframes page-landscapeAni{0% {-webkit-transform:rotate(90deg);}30% {-webkit-transform:rotate(90deg);}70%{-webkit-transform:rotate(0deg);}100% {-webkit-transform:rotate(0deg);}}@keyframes page-landscapeAni{0% {transform:rotate(90deg);}30% {transform:rotate(90deg);}70%{transform:rotate(0deg);}100% {transform:rotate(0deg);}}
    .btn1 {position:relative;box-sizing:border-box;font-weight:500;text-align:center;border-radius:.24rem;-webkit-tap-highlight-color:transparent;display:block;margin-left:auto;margin-right:auto;line-height:.48rem;}
    a:hover,a:focus {color:;text-decoration:blink;}
    .mask{width: 100%;height: 100%;position: fixed;left: 0;top: 0;background-color: rgba(0,0,0,.7);z-index: 99;}
    #close{font-size: 20px;position: absolute;right: 10px;top: 0;color: #000;}
    .viewMore{width: 100%;height: 80%;position: fixed;left: 0;bottom: -1000px;background-color: #fff;transition: all 0.5s;overflow-y: auto;z-index: 101}
    .viewMore h1{font-size: 18px;line-height: 16px;padding: 10px 15px;margin: 0;position: relative}
    .viewMore h1::before{content: "";width: 3px;height:20px;background-color: #df2413;position: absolute;left: 0;top: 50%;margin-top: -10px;}
    /*详情强制样式*/
    .proj{font-size:12px !important;padding: 15px;}
    .proj p {width: 100%!important;}
    .proj img{ width:100% !important;}
    .proj div{width: 100% !important;height: auto !important}
    .infoOne{}
    .infoOne .spanImg{width: 100%;padding-top:50%;position: relative;display: block;background-size: cover;background-position: 50% 0;background-color: #eee;border-radius: 3x;}
</style>

<div id="pageContainer">
    <div class="page page_h page-call">
        <div class="g-box call-head">
            <div class="infoOne" id="topBg">
                <span id="bgpic" class="spanImg" style='display: block; background-image: url("<?php echo MODULE_URL;?>template/mobile/img/1899_yqj_o_bg4.jpg");'></span>
                <input type="hidden" id="bgpicBase64" value="">
            </div>
            <div class="main">
                <div class="avatar">
                    <img id="teamhPic" class="avatar-pic j-avatarPic" src="<?php echo MODULE_URL;?>template/mobile/img/yqj_c_head.png">
                    <input type="hidden" id="teamhPicBase64" value="">
                    <div class="avatar-mask j-avatarMask">
                        <span class="avatar-edit">更换LOGO</span></div>
                    <input id="upLogo" class="file_input j-canvasclip-file" type="file" accept="image/*" data-clipoption="{target:'j-avatarPic',size:{w:128,h:128},callback:function(){canvasClip.callback('head')}}"></div>
                <h4 class="invite-user">微公益</h4>
                <h3>邀您一起献爱心</h3>
                <p class="mrg_t2">爱心人士代表&nbsp;发起</p>
                <div class="invite-desc">
                    <p>“{$kouhao}”</p>
                </div>
                <div class="target j-target">
                    <span class="clr_dft">一起捐已筹&nbsp;{if !empty($gift_jk_query['sum'])}{$gift_jk_query['sum']}{else}0{/if}&nbsp;元</span>&nbsp;&nbsp;
                    <span style="color:#dee4e8">|</span>&nbsp;&nbsp;
                    {if $goal=="不设目标"}
                        <b>目标不限</b>
                    {else}
                        <b>目标&nbsp;{$goal}&nbsp;元</b>
                    {/if}
                </div>
                {if $goal != "不设目标"}
                <div class="mod-progressbar-wrap j-progressbar">
                    <div class="mod-progressbar">
                        <div class="mod-progressbar-done j-progress_done show" style="width:597%;"></div>
                    </div>
                    <div class="fnt-dinc">&nbsp;597%</div>
                </div>
                {/if}
            </div>
            <div class="call-head-bar">
                <a href="javascript:;" class="call-head-opr j-chgbg">更换
                    <input id="topImgUpFile" class="file_input j-canvasclip-file" type="file" accept="image/*" data-clipoption="{target:'j-bgPic',size:{w:500,h:325.33},clipBoxRatio:1,clipPicRatio:1.2,callback:function(){canvasClip.callback('bg')}}"></a></div>
            <div class="septitle">
                <span class="septitle-txt">帮助公益项目</span></div>
            <div class="g-flex_fs">
                <div class="g-flex-hd">
                    <div class="projcover">
                        <img class="projcover-pic" src="{$_W['attachurl']}{$project['pro_feature']}"></div>
                </div>
                <div class="g-flex-m">
                    <h4 class="fnt-title">{$project['pro_name']}</h4>
                    <p class="proj-desc">{$project['pro_short']}</p>
<!--                    <div class="mrg_t1 hm">善款接收 :<a href="">慈善协会</a></div>-->
                </div>
            </div>
            <div class="proj-viewmore">
                <a href="javascript:;" id="proj-detail" class="btn_m btn_holl_lt j-proj-detail-open" data-loaded="no" onclick="">阅读更多</a>
            </div>
        </div>

        <div class="mod-footbar" id="BtnArea">
            <div onclick="">
                <a href="javascript:;" class="btn1 btn_holl_lt" id="btn_edit">返回编辑</a>
            </div>
            <div onclick="">
                <a href="javascript:;" class="btn1 btn_fill" id="btn_submit">完成发起</a>
            </div>
        </div>
        <div class="share-wrap j-openDialog"><div class="share-txt">点击右上角，把一起捐发送给朋友吧<i class="share-finger"></i></div></div>
        <footer class="page-foot" style="bottom: .8rem;"><img class="page-foot-logo" src="<?php echo MODULE_URL;?>template/mobile/img/logo_text.png"></footer>
    </div>

    <!--阅读更多-->
    <div class="mask" style="display: none"></div>
    <div class="viewMore" style="display: none">
        <div id="close">×</div>
        <div class="g-flex_fs">
            <div class="g-flex-hd">
                <div class="projcover">
                    <img class="projcover-pic" src="{$_W['attachurl']}{$project['pro_feature']}">
                </div>
            </div>
            <div class="g-flex-m">
                <h4 class="fnt-title">{$project['pro_name']}</h4>
                <p class="proj-desc">{$project['pro_short']}</p>
            </div>
        </div>
        <h1>项目详情</h1>
        <div class="proj" style="">
            <?php echo html_entity_decode($project['pro_content']);?>
        </div>
    </div>

</div>

<script src="<?php echo MODULE_URL;?>template/mobile/js/tools.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<!--底部logo和版权-->
{php echo register_jssdk(false);}

<script type="text/javascript">
    // function fqfx(){
    //     $(".page-call .share-wrap").show();
    //     $("#BtnArea").hide();
    // }
    $("#btn_edit").click(function(){
        window.history.back(-1);
    });
    $("#proj-detail").click(function () {
        $(".mask").show();
        $(".viewMore").show();
        $(".viewMore").css("bottom","0");
        $(".mask,#close").click(function () {
            $(".viewMore").css("bottom","-1000px");
            setTimeout(function () {
                $(".mask").hide();
                $(".viewMore").hide();
            },400)

        });
    });

    // 隐藏微信分享按钮
    btnHide();
    function btnHide(){
        wx.ready(function () {
            wx.hideMenuItems({
                menuList: ['menuItem:share:appMessage','menuItem:share:timeline', 'menuItem:share:qq','menuItem:share:QZone','menuItem:openWithSafari','menuItem:share:email','menuItem:copyUrl','menuItem:favorite']
                });
            });
    }
    //点击完成发起展现分享按钮
    $("#btn_submit").click(function(){
        $(".page-call .share-wrap").show();
        $("#BtnArea").hide();
        //背景
        var bgpicBase64=$("#bgpicBase64").val();
        //logo
        var teamhPicBase64=$("#teamhPicBase64").val();
        //保存分享一起捐数据
        var gift_id = '';
        $.ajax({
            url: "{php echo $this->createMobileUrl('together')}",
            type: 'POST',
            dataType: 'json',
            data: {other_id: "{$mem_id}",pro_id:"{$project['pro_id']}",logo:teamhPicBase64,bgpic:bgpicBase64},
            success:function(data){
                gift_id += data;
            }
        })
        btnShow();
        function btnShow(){
            wx.ready(function () {
                wx.showMenuItems({ 
                    menuList: ['menuItem:share:appMessage','menuItem:share:timeline', 'menuItem:share:qq','menuItem:share:QZone','menuItem:openWithSafari','menuItem:share:email','menuItem:copyUrl']
                    });
            });
        }
        //分享链接
        initShare();
        function initShare(){
            wx.ready(function(){
                sharedata = {
                title: "{$project['pro_name']}",
                desc: "{php echo trim($kouhao);}",
                link: "{php echo $_W['siteroot'].'app/'.$this->createMobileUrl('share', array('pro_id'=>$project['pro_id'], 'mem_id'=>$user['mem_id'],'goal'=>$goal,'kouhao'=>$kouhao));}&gift_id="+gift_id,
                imgUrl: "{$_W['attachurl']}{$project['pro_feature']}",
                success: function(){

                    }
                };
                wx.onMenuShareAppMessage(sharedata);
                wx.onMenuShareTimeline(sharedata);
            });
            
        }
    });


    //上传图片预览和压缩
    $("#topImgUpFile").one("click",function () {
        var topImgUpFile=document.getElementById("topImgUpFile");//点击上传id
        var bgpic=$("#bgpic");   //预览图片存放id
        var bgpicBase64=$("#bgpicBase64");  //存放base64给后台
        upFile(topImgUpFile,bgpic,bgpicBase64,false);
    });
    $("#upLogo").one("click",function () {
        var upLogo=document.getElementById("upLogo");//点击上传id
        var teamhPic=$("#teamhPic");   //预览图片存放id
        var teamhPicBase64=$("#teamhPicBase64");  //存放base64给后台
        upFile(upLogo,teamhPic,teamhPicBase64,true);
    });

    function upFile(_upFile,imgId,inputBase64,bl){
        _upFile.addEventListener("change",function(){
            if (_upFile.files.length === 0) {
                alert("请选择图片");
                return; }
            var oFile = _upFile.files[0];
            //if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
            //  if(oFile.size>15*1024*1024){
            //     alert("照片上传：文件不能超过15MB!请使用容量更小的照片。")
            //     return;
            //  }
            if(!new RegExp("(jpg|jpeg|png)+","gi").test(oFile.type)){
                alert("照片上传：文件类型必须是JPG、JPEG、PNG");
                return;
            }
            var reader = new FileReader();
            reader.onload = function(e) {
                var base64Img= e.target.result;
                //压缩前预览
                //$("#preview").attr("src",base64Img);
                //--执行resize。
                var _ir=ImageResizer({
                    resizeMode:"auto"
                    ,dataSource:base64Img
                    ,dataSourceType:"base64"
                    ,maxWidth:1200 //允许的最大宽度
                    ,maxHeight:600 //允许的最大高度。
                    ,onTmpImgGenerate:function(img){

                    }
                    ,success:function(resizeImgBase64,canvas){
                        //压缩后预览
                        if(bl){
                            imgId.attr("src",resizeImgBase64);
                        }else {
                            imgId.css("background-image","url("+resizeImgBase64+")");
                        }
                        inputBase64.val(resizeImgBase64.substr(22));
                        //赋值到隐藏域传给后台
                        // $('#upTo').on('click',function(){
                        //     //alert('传给后台base64文件数据为：'+resizeImgBase64.substr(22));
                        //     $.ajax({
                        //         url:'server.php',
                        //         type:'POST',
                        //         dataType:'json',
                        //         data:{
                        //             imgOne:resizeImgBase64.substr(22)
                        //         },
                        //         success:function(data){
                        //             alert(data.msg);
                        //         }
                        //     });
                        // });
                    }
                    ,debug:true
                });
            };
            reader.readAsDataURL(oFile);
        },false);
    }



</script>
</body>
</html>